<template>
<div id="comment">

  <ul>
    <li v-for="(item,index) in comment_info" class="comment_item">
      <div class="first_floor">
<!--        头像-->
        <van-image round width="40px" height="40px"
  :src="'/api/'+item.img_header" v-if="item.img_header"
 class="header_img"       />
                <van-image round width="40px" height="40px"
  src="/api/media/badmin.png" v-else
 class="header_img"       />

<!--        昵称-->
        <span class="name" v-if="item.nickname">{{item.nickname}}</span>
                <span class="name" v-else>{{item.username}}</span>

<!--        x楼-->
        <span class="floor">{{index+1}}楼</span>
    </div>
<!--      内容区域-->

      <div class="content">
        {{item.comment_text}}
      </div>
      <div class="tag">

         <span class="time"> {{item.comment_time|agoTime}}</span>
        <span class="place">山西泰安</span>
        <span class="good"><van-icon name="good-job-o" color="#1CB194" size="20px"/></span>
        <span class="reply"><van-icon name="comment-o" color="#1CB194" size="20px"/> 回复</span>
        </div>

<van-divider class="divider_item"
  :style="{ color: '#bcbcbc', borderColor: '#bcbcbc'}"
>

</van-divider>
    </li>

  </ul>
</div>
</template>

<script>
import {formatDate} from "@/common/common";
export default {
name: "Comments",
  props:{
  comment_info:{
    type:Array,
    default:[]
  }
  },
  filters: {
        formatDate(time) {
            var date = new Date(time);
          let new_time=new Date()-date
          console.log(new_time)
          return formatDate(date, 'yyyy-MM-dd hh:mm');
        },
      agoTime(dateTimeStamp) {
      dateTimeStamp = new Date(dateTimeStamp).getTime(); // 获取到时间的毫秒数
      let result = null;
      var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
      var hour = minute * 60;
      var day = hour * 24;
      var week = day * 7;
      var halfamonth = day * 15;
      var month = day * 30;
      var now = new Date().getTime(); //获取当前时间毫秒
      // console.log(now)
      var diffValue = now - dateTimeStamp; //时间差
      if (diffValue < 0) {
        return;
      }
      var minC = diffValue / minute; //计算时间差的分，时，天，周，月
      var hourC = diffValue / hour;
      var dayC = diffValue / day;
      var weekC = diffValue / week;
      var monthC = diffValue / month;
      if (monthC >= 1 && monthC <= 3) {
        result = " " + parseInt(monthC) + "月前";
      } else if (weekC >= 1 && weekC <= 3) {
        result = " " + parseInt(weekC) + "周前";
      } else if (dayC >= 1 && dayC <= 6) {
        result = " " + parseInt(dayC) + "天前";
      } else if (hourC >= 1 && hourC <= 23) {
        result = " " + parseInt(hourC) + "小时前";
      } else if (minC >= 1 && minC <= 59) {
        result = " " + parseInt(minC) + "分钟前";
      } else if (diffValue >= 0 && diffValue <= minute) {
        result = "刚刚";
      } else {
        var datetime = new Date();
        datetime.setTime(dateTimeStamp);
        var Nyear = datetime.getFullYear();
        var Nmonth =
          datetime.getMonth() + 1 < 10
            ? "0" + (datetime.getMonth() + 1)
            : datetime.getMonth() + 1;
        var Ndate =
          datetime.getDate() < 10
            ? "0" + datetime.getDate()
            : datetime.getDate();
        var Nhour =
          datetime.getHours() < 10
            ? "0" + datetime.getHours()
            : datetime.getHours();
        var Nminute =
          datetime.getMinutes() < 10
            ? "0" + datetime.getMinutes()
            : datetime.getMinutes();
        var Nsecond =
          datetime.getSeconds() < 10
            ? "0" + datetime.getSeconds()
            : datetime.getSeconds();
        result = Nyear + "-" + Nmonth + "-" + Ndate;
      }
      return result;
    }

    }


}
</script>

<style scoped>
.entire{

}
.img{
  float: left;
}
.first_floor{
line-height: 43.7px;

}
.comment_item{
  position: relative;
  display: block;
}
.name{
  position: absolute;
  left: 48px;
  color: #1CB194;
}
.floor{
  position: absolute;
  right: 1px;
  font-size: 0.8rem;
  color: #bcbcbc;
}
.divider_item{
  margin-left: 47px;
}
.content{
  position: relative;
  left: 45px;
  color: #333;
  top:-6px;
  width:270px
}
.tag{
margin-top: 15px;
}
#comment{
  /*margin-top: 672px;*/
}
.time{
  position: relative;
  left: 47px;
  font-size: 12px;
}
.place{
  position: relative;
  left: 70px;
  font-size: 12px;
}
.good{
  position: relative;
  left: 120px;
  font-size: 12px;
  color: #1CB194;
}
.reply{
  position: relative;
  left: 140px;
  font-size: 12px;
  color: #1CB194;
}
#comment{
  background-color: white;
  padding:0 15px;
}
.header_img{
  position: relative;
  left: 1px;
  top: 1px;
}
/deep/ .van-notify{
  padding: 10px;
  height: 44px;
}
</style>